<template>
  <div
    v-loading="dataLoadingDcqc"
    class="bg"
    :style="bgStyle"
  >
    <PreviewDc
      v-if="!dataLoadingDcqc"
      :report-id="reportId"
      :canvas-id="reportId"
      :component-data="componentDataDcqc[reportId]"
      :canvas-style-data="canvasStyleDataDcqc[reportId] || canvasStyleDataDcqc"
      :back-screen-shot="backScreenShot"
      :panel-info="panelInfo"
      :dcqc-dialog-width="dcqcDialogWidth"
      style="position: relative;padding: 2px;box-sizing: border-box !important;"
      @mainHeightChange="mainHeightChange"
    />
  </div>
</template>
<script>
import { uuid } from 'vue-uuid'
import { initPanelDataDcqc } from '@/api/panel/panel'
import { queryTargetPanelJumpInfo } from '@/api/panel/linkJump'
import { proxyInitPanelData } from '@/api/panel/shareProxy'
import { getOuterParamsInfo } from '@/api/panel/outerParams'
import { mapState } from 'vuex'
import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'

export default {
  components: { PreviewDc: () => import('./PreviewDc') },
  props: {
    reportId: {
      type: String,
      required: false,
      default: ''
    },
    dcqcDialogWidth: {
      type: String,
      required: false
    },
    dcqcDialogHeight: {
      type: String,
      required: false
    },
    level: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      canvasId: 'canvas-main',
      dataLoadingDcqc: true,
      backScreenShot: false,
      mainHeight: '666px',
      shareUserId: null
    }
  },
  computed: {
    mainCanvasComponentData() {
      return getNowCanvasComponentData(this.canvasId)
    },
    bgStyle() {
      if (this.backScreenShot) {
        return { height: this.mainHeight }
      } else {
        return { height: this.dcqcDialogHeight + 'px' }
      }
    },
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
    ...mapState([
      'canvasStyleDataDcqc',
      'componentDataDcqc'
    ])
  },
  watch: {
    reportId: {
      immediate: true,
      handler(newVal) {
        if (this.level === 1) {
          console.log('进入保存第一层弹窗ID')
          this.$store.state.oneDialogId = newVal
        }
        this.restore()
      }
    }
  },

  // mounted() {
  //   this.restore()
  // },
  methods: {
    mainHeightChange(mainHeight) {
      this.mainHeight = mainHeight
    },
    restore() {
      const _this = this
      _this.dataLoadingDcqc = true
      if (!this.reportId) {
        return
      }
      const arr = this.reportId.split('|')
      if (!arr || arr.length === 0) {
        return
      }
      _this.panelId = arr[0]

      if (arr.length > 1) {
        this.shareUserId = arr[1]
      }

      if (_this.$route.params.backScreenShot !== undefined) {
        _this.backScreenShot = _this.$route.params.backScreenShot
      }
      // 加载视图数据
      if (this.shareUserId !== null) {
        const param = { userId: this.shareUserId }
        proxyInitPanelData(this.panelId, param, () => {
          // _this.dataLoadingDcqc = false
          this.initCallBack()
        })
      } else {
        initPanelDataDcqc(this.panelId, false, () => {
          // _this.dataLoadingDcqc = false
          // const condition = formatCondition(data)
          this.initCallBack()
        })
      }
    },

    initCallBack() {
      this.dataLoadingDcqc = true
      let loadingCount = 0
      // 如果含有跳转参数 进行触发
      const tempParam = localStorage.getItem('jumpInfoParam')
      // 添加外部参数
      const attachParamsEncode = this.$route.query.attachParams
      tempParam && loadingCount++
      attachParamsEncode && loadingCount++

      if (attachParamsEncode) {
        try {
          const Base64 = require('js-base64').Base64
          const attachParam = JSON.parse(Base64.decode(attachParamsEncode))
          getOuterParamsInfo(this.panelId).then(rsp => {
            if (--loadingCount === 0) {
              this.dataLoadingDcqc = false
            }
            this.$store.commit('setNowPanelOuterParamsInfo', rsp.data)
            this.$store.commit('addOuterParamsFilter', attachParam)
          })
        } catch (e) {
          if (--loadingCount === 0) {
            this.dataLoadingDcqc = false
          }
          this.$message({
            message: this.$t('panel.outer_param_decode_error'),
            type: 'error'
          })
        }
      }
      if (tempParam) {
        localStorage.removeItem('jumpInfoParam')
        const jumpParam = JSON.parse(tempParam)
        let str = ''
        if (this.level === 1) {
          str = jumpParam.sourcePanelId
        } else {
          str = this.$store.state.oneDialogId
        }
        const jumpRequestParam = {
          sourcePanelId: str,
          sourceViewId: jumpParam.sourceViewId,
          sourceFieldId: null,
          targetPanelId: this.panelId
        }
        // 自己添加的参数，判断是否为弹窗
        jumpParam.myType = 'dialog'
        try {
          // 刷新跳转目标仪表板联动信息
          queryTargetPanelJumpInfo(jumpRequestParam).then(rsp => {
            if (--loadingCount === 0) {
              this.dataLoadingDcqc = false
            }
            this.$store.commit('setNowTargetPanelJumpInfo', rsp.data)
            const arr = [this.reportId, jumpParam]
            this.$store.commit('addViewTrackFilterDcqc', arr)
            console.log('jumpParam', jumpParam)
          })
        } catch (e) {
          if (--loadingCount === 0) {
            this.dataLoadingDcqc = false
          }
        }
      }
      if (loadingCount === 0) {
        this.dataLoadingDcqc = false
      }
    },
    resetID(data) {
      if (data) {
        data.forEach(item => {
          item.type !== 'custom' && (item.id = uuid.v1())
        })
      }
      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  min-width: 200px;
  min-height: 200px;
  // background-color: #f7f8fa;
}
</style>

